<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script>
   		$(document).ready(function() {
   			$("div").bind("swiperight",function(event) {
   				$("#mypanel").panel("open");
   			});
   		});
   	</script>
	<script>
		function li_1(){
			window.location.href="http://localhost:8080/findAll";
		};
		function li_2(){
			window.location.href="http://localhost:8080/index01";
		};
		function li_3(){
			window.location.href="http://localhost:8080/index03";
		};
		function li_4(){
			window.location.href="http://localhost:8080/index02";
		};
	</script>
    <style>
  			.ui-grid-a .ui-block-a
  			{
  				margin: 1%;
  				width: 48%;
  			}
  			.ui-grid-a .ui-block-b
  			{
  				margin: 1%;
  				width: 48%;
  			}
  			.ui-bar-c
  			{
  				height: 150px;
  			}
  		</style>
</head>
<body>
	<div data-role = "page">
		<div data-role="panel" id="mypanel" data-swipe-close="false">
			<h4>作者：梁海琦</h4>
			<h4>作者介绍</h4>
			<p>就读于东莞理工学院城市学院</p>
			<p>性格开朗、稳重、有活力，待人热情、真诚；工作认真负责，积极主动，
			能吃苦耐劳，用于承受压力，勇于创新；有很强的组织能力和团队协作精神，
			具有较强的适应能力；纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神</p>
		</div>
		<div data-role="header" data-position="fixed" data-theme="b">
			<a href="#" data-role="button" data-iconpos="left" data-icon="arrow-l">返回</a>	
			<h1>我的伙伴</h1>
			<a href="#mypanel" data-role="button" data-iconpos="right" data-icon="grid">关于</a>	
		</div>
		
		
		<div data-role="content">
			<fieldset class="ui-grid-a">
				<div class="ui-block-a ui-bar-c">
					<a href="#popup_1" data-rel = "popup" data-position-to="window" style="text-decoration: none;">
						<img src="img/p1.jpg" width="100%" height="80%"/>
						<div style="text-align:center">上学前</div>
					</a>
				</div>
				<div class="ui-block-b ui-bar-c">
					<a href="#popup_2" data-rel = "popup" data-position-to="window" style="text-decoration: none;">
						<img src="img/p2.jpg" width="100%" height="80%"/>
						<div style="text-align:center">幼儿园</div>
					</a>
				</div>
				<div class="ui-block-a ui-bar-c">
					<a href="#popup_3" data-rel = "popup" data-position-to="window" style="text-decoration: none;">
						<img src="img/p3.jpg" width="100%" height="80%"/>
						<div style="text-align:center">小学</div>
					</a>
				</div>
				<div class="ui-block-b ui-bar-c">
					<a href="#popup_4" data-rel = "popup" data-position-to="window" style="text-decoration: none;">
						<img src="img/p4.jpg" width="100%" height="80%"/>
						<div style="text-align:center">初中</div>
					</a>
				</div>
				<div class="ui-block-a ui-bar-c">
					<a href="#popup_5" data-rel = "popup" data-position-to="window" style="text-decoration: none;">
						<img src="img/p5.jpg" width="100%" height="80%"/>
						<div style="text-align:center">高中</div>
					</a>
				</div>
				<div class="ui-block-b ui-bar-c">
					<a href="#popup_6" data-rel = "popup" data-position-to="window" style="text-decoration: none;">
						<img src="img/p6.jpg" width="100%" height="80%"/>
						<div style="text-align:center">大学</div>
					</a>
				</div>
			</fieldset>		

		
			<div data-role = "popup" id="popup_1">
				<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<img src="img/p1.jpg" style="max-height: 512px;" alt="China1"/>
			</div>
			<div data-role = "popup" id="popup_2">
				<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<img src="img/p2.jpg" style="max-height: 512px;" alt="China2"/>
			</div>
			<div data-role = "popup" id="popup_3">
				<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<img src="img/p3.jpg" style="max-height: 512px;" alt="China3"/>
			</div>
			<div data-role = "popup" id="popup_4">
				<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<img src="img/p4.jpg" style="max-height: 512px;" alt="China4"/>
			</div>
			<div data-role = "popup" id="popup_5">
				<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<img src="img/p5.jpg" style="max-height: 512px;" alt="China5"/>
			</div>
			<div data-role = "popup" id="popup_6">
				<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<img src="img/p6.jpg" style="max-height: 512px;" alt="China6"/>
			</div>
		</div>
		
		
		
		<div data-role="footer" data-position="fixed" data-theme="b">
			<div data-role="navbar" data="c">
				<ul>
					<li><a th:href="@{/findAll}" onclick="li_1()" data-icon="home">成长轨迹</a></li>
					<li><a th:href="@{/index01}" onclick="li_2()" data-icon="plus">爱好推荐</a></li>
					<li><a th:href="@{/index03}" onclick="li_3()" data-icon="star">阶段印象</a></li>
					<li><a th:href="@{/index02}" onclick="li_4()" data-icon="info">后台管理</a></li>
				</ul>
			</div>
		</div>
	</div>	
</body>
</html>